<template>
<div>
    <Header />
    <el-container class="frontend-infos">
        <el-aside width="140px">
            <el-menu default-active="info" >
                <el-menu-item index="info" @click="selected = 'info'">
                    <span>个人信息</span>
                </el-menu-item>
                <el-menu-item index="order" @click="selected = 'order'">
                    <span>我的订单</span>
                </el-menu-item>
                <el-menu-item index="course" @click="selected = 'course'">
                    <span>我的课程</span>
                </el-menu-item>
                <el-menu-item index="information" @click="selected = 'information'">
                    <span>下载的材料</span>
                </el-menu-item>
                <el-menu-item index="collect" @click="selected = 'collect'">
                    <span>我的收藏</span>
                </el-menu-item>
                <el-menu-item index="logout" >
                    <span>退出登录</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <component v-if="selected == 'info'" :is="info" />
            <component v-if="selected == 'order'" :is="order" />
            <component v-if="selected == 'course'" :is="course" />
            <component v-if="selected == 'information'" :is="information" />
        </el-main>
    </el-container>
</div>
</template>

<script setup lang="ts">
import Header from '@/components/header.vue'
import info from './info.vue'
import order from './order.vue'
import course from './course.vue'
import information from './information.vue'
import { ref } from 'vue'

const selected = ref<string>('info')

</script>
<style scoped lang="scss">
.frontend-infos{padding-top: 80px;width: 900px;}
</style>
      